﻿<!doctype html>
<html>

<head>
    <style>
        @font-face {
            font-family: 'DS-Digital';
            src: url('../static/font/DS-DIGIT.TTF') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
    </style>
    <meta charset="utf-8">
    <title>index</title>
    <script type="text/javascript" src="../static/js/jquery.js"></script>
    <link rel="stylesheet" href="../static/css/comon0.css">
    <style>
        .counter-name {
            color: #fff;
            font-size: 0.13rem;
            margin-top: 0.08rem;
            letter-spacing: 1px;
            text-align: center;
        }

        .counter-value {
            color: #e7cf4d;
            font-size: 0.5rem;
            font-family: 'DS-Digital', Arial, sans-serif;
            text-align: center;
        }

        .counter {
            text-align: center;
        }
    </style>
</head>
<script>
    $(window).load(function () {
        $(".loading").fadeOut()
    })

    /****/
    $(document).ready(function () {
        var whei = $(window).width()
        $("html").css({ fontSize: whei / 20 })
        $(window).resize(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 20 })
        });
    });






</script>
<script type="text/javascript" src="../static/js/echarts.min.js"></script>
<script type="text/javascript" src="../static/js/china.js"></script>
<script type="text/javascript" src="../static/js/dezhou.js"></script>

<body>
    <div class="canvas" style="opacity: .2">
        <iframe frameborder="0" src="../static/js/index.html" style="width: 100%; height: 100%"></iframe>
    </div>
    <div class="loading">
        <div class="loadbox"><img src="../static/picture/loading.gif"> 页面加载中...</div>
    </div>
    <div class="head">
        <h1>{{title}}</h1>
        <div class="weather">
            <!-- <img src="picture/weather.png"><span>多云转小雨</span> -->
            <span id="showTime"></span>
        </div>

        <script>
            var t = null;
            t = setTimeout(time, 1000);//開始运行
            function time() {
                clearTimeout(t);//清除定时器
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours();//获取时
                var m = dt.getMinutes();//获取分
                var s = dt.getSeconds();//获取秒
                document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "日" + "-" + h + "时" + m + "分" + s + "秒";
                t = setTimeout(time, 1000); //设定定时器，循环运行     
            }



        </script>


    </div>
    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height: 3.2rem">
                    <div class="alltitle">{{form.counters.employment.name}}</div>
                    <div class="allnav" id="echart1"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.2rem">
                    <div class="alltitle">{{form.counters.enterprise.name}}</div>
                    
                    <div class="allnav" id="echart2"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.2rem">
                    <div style="height:100%; width: 100%;">
                        <div class="sy" id="fb1"></div>
                        <div class="sy" id="fb2"></div>
                        <div class="sy" id="fb3"></div>
                        <script>
                            // 就业人员年龄分布（饼状图，按年龄段分组）
                            $(function () {
                                var employmentMonthly = JSON.parse('{{ form.employment_detail.monthly|tojson|safe }}');
                                var ageGroups = {
                                    '18-25': 0,
                                    '26-35': 0,
                                    '36-45': 0,
                                    '46-55': 0,
                                    '56及以上': 0
                                };
                                employmentMonthly.forEach(function (m) {
                                    m.youths.forEach(function (y) {
                                        var age = y.age;
                                        if (age >= 18 && age <= 25) ageGroups['18-25']++;
                                        else if (age >= 26 && age <= 35) ageGroups['26-35']++;
                                        else if (age >= 36 && age <= 45) ageGroups['36-45']++;
                                        else if (age >= 46 && age <= 55) ageGroups['46-55']++;
                                        else if (age >= 56) ageGroups['56及以上']++;
                                    });
                                });
                                var pieData = Object.keys(ageGroups).map(function (key, idx) {
                                    return {
                                        name: key,
                                        value: ageGroups[key]
                                    };
                                });
                                // 按数量排序
                                pieData.sort(function(a, b) { return b.value - a.value; });
                                // 图例只显示前6个
                                var legendData = pieData.slice(0, 6);
                                var myChart = echarts.init(document.getElementById('fb1'));
                                var option = {
                                    title: {
                                        text: '就业人员年龄分布',
                                        left: 'center',
                                        textStyle: { color: '#fff', fontSize: 16 }
                                    },
                                    tooltip: {
                                        trigger: 'item',
                                        formatter: '{b}: {c}人 ({d}%)',
                                        position: function (point, params, dom, rect, size) {
                                            // 获取tooltip的尺寸
                                            var tooltipWidth = size.contentSize[0];
                                            var tooltipHeight = size.contentSize[1];
                                            
                                            // 获取图表容器的尺寸
                                            var chartWidth = size.viewSize[0];
                                            var chartHeight = size.viewSize[1];
                                            
                                            // 计算tooltip位置
                                            var x = point[0];
                                            var y = point[1];
                                            
                                            // 如果tooltip会超出左边界，则向右偏移
                                            if (x - tooltipWidth / 2 < 0) {
                                                x = tooltipWidth / 2 + 10;
                                            }
                                            // 如果tooltip会超出右边界，则向左偏移
                                            else if (x + tooltipWidth / 2 > chartWidth) {
                                                x = chartWidth - tooltipWidth / 2 - 10;
                                            }
                                            
                                            // 如果tooltip会超出上边界，则向下偏移
                                            if (y - tooltipHeight < 0) {
                                                y = tooltipHeight + 10;
                                            }
                                            // 如果tooltip会超出下边界，则向上偏移
                                            else if (y + tooltipHeight > chartHeight) {
                                                y = chartHeight - tooltipHeight - 10;
                                            }
                                            
                                            return [x, y];
                                        }
                                    },
                                    legend: {
                                        bottom: 5,
                                        left: 'center',
                                        width: '95%',
                                        height: 'auto',
                                        maxHeight: 80,
                                        orient: 'horizontal',
                                        data: legendData.map(function(item) { 
                                            return item.name.length > 8 ? item.name.substring(0, 8) + '...' : item.name;
                                        }),
                                        textStyle: { 
                                            color: 'rgba(255,255,255,.8)', 
                                            fontSize: 9,
                                            width: 50,
                                            overflow: 'truncate'
                                        },
                                        itemWidth: 6,
                                        itemHeight: 6,
                                        itemGap: 6
                                    },
                                    series: [{
                                        name: '年龄段',
                                        type: 'pie',
                                        radius: ['40%', '60%'],
                                        center: ['50%', '45%'],
                                        data: pieData,
                                        color: ['#065aab', '#27d08a', '#2f89cf', '#e7cf4d', '#ff7b7b'],
                                        label: {
                                            show: false
                                        },
                                        labelLine: { show: false }
                                    }]
                                };
                                myChart.setOption(option);
                            });
                            // 企业岗位类型分布
                            $(function () {
                                var districts = JSON.parse('{{ form.enterprise_detail.districts|tojson|safe }}');
                                var jobCount = {};
                                districts.forEach(function (d) {
                                    var job = d.job;
                                    jobCount[job] = (jobCount[job] || 0) + 1;
                                });
                                var pieData = Object.keys(jobCount).map(function (key) {
                                    return {
                                        name: key,
                                        value: jobCount[key]
                                    };
                                });
                                // 按数量排序
                                pieData.sort(function(a, b) { return b.value - a.value; });
                                // 图例只显示前6个
                                var legendData = pieData.slice(0, 6);
                                var myChart = echarts.init(document.getElementById('fb2'));
                                var option = {
                                    title: {
                                        text: '企业岗位类型分布',
                                        left: 'center',
                                        textStyle: { color: '#fff', fontSize: 16 }
                                    },
                                    tooltip: {
                                        trigger: 'item',
                                        formatter: '{b}: {c}个 ({d}%)',
                                        position: function (point, params, dom, rect, size) {
                                            // 获取tooltip的尺寸
                                            var tooltipWidth = size.contentSize[0];
                                            var tooltipHeight = size.contentSize[1];
                                            
                                            // 获取图表容器的尺寸
                                            var chartWidth = size.viewSize[0];
                                            var chartHeight = size.viewSize[1];
                                            
                                            // 计算tooltip位置
                                            var x = point[0];
                                            var y = point[1];
                                            
                                            // 如果tooltip会超出左边界，则向右偏移
                                            if (x - tooltipWidth / 2 < 0) {
                                                x = tooltipWidth / 2 + 10;
                                            }
                                            // 如果tooltip会超出右边界，则向左偏移
                                            else if (x + tooltipWidth / 2 > chartWidth) {
                                                x = chartWidth - tooltipWidth / 2 - 10;
                                            }
                                            
                                            // 如果tooltip会超出上边界，则向下偏移
                                            if (y - tooltipHeight < 0) {
                                                y = tooltipHeight + 10;
                                            }
                                            // 如果tooltip会超出下边界，则向上偏移
                                            else if (y + tooltipHeight > chartHeight) {
                                                y = chartHeight - tooltipHeight - 10;
                                            }
                                            
                                            return [x, y];
                                        }
                                    },
                                    legend: {
                                        bottom: 5,
                                        left: 'center',
                                        width: '95%',
                                        height: 'auto',
                                        maxHeight: 80,
                                        orient: 'horizontal',
                                        data: legendData.map(function(item) { 
                                            return item.name.length > 8 ? item.name.substring(0, 8) + '...' : item.name;
                                        }),
                                        textStyle: { 
                                            color: 'rgba(255,255,255,.8)', 
                                            fontSize: 9,
                                            width: 50,
                                            overflow: 'truncate'
                                        },
                                        itemWidth: 6,
                                        itemHeight: 6,
                                        itemGap: 6
                                    },
                                    series: [{
                                        name: '岗位类型',
                                        type: 'pie',
                                        radius: ['40%', '60%'],
                                        center: ['50%', '45%'],
                                        data: pieData,
                                        color: ['#27d08a', '#2f89cf', '#065aab', '#e7cf4d', '#ff7b7b', '#ffcf7b', '#7bffcf'],
                                        label: {
                                            show: false
                                        },
                                        labelLine: { show: false }
                                    }]
                                };
                                myChart.setOption(option);
                            });
                            // 培训课程分布
                            $(function () {
                                var trainingMonthly = JSON.parse('{{ form.training_detail.monthly|tojson|safe }}');
                                var courseCount = {};
                                trainingMonthly.forEach(function (t) {
                                    var course = t.content;
                                    courseCount[course] = (courseCount[course] || 0) + 1;
                                });
                                var pieData = Object.keys(courseCount).map(function (key) {
                                    return {
                                        name: key,
                                        value: courseCount[key]
                                    };
                                });
                                // 按数量排序
                                pieData.sort(function(a, b) { return b.value - a.value; });
                                // 图例只显示前6个
                                var legendData = pieData.slice(0, 6);
                                var myChart = echarts.init(document.getElementById('fb3'));
                                var option = {
                                    title: {
                                        text: '最受欢迎培训课程',
                                        left: 'center',
                                        textStyle: { color: '#fff', fontSize: 16 }
                                    },
                                    tooltip: {
                                        trigger: 'item',
                                        formatter: '{b}: {c}人 ({d}%)',
                                        position: function (point, params, dom, rect, size) {
                                            // 获取tooltip的尺寸
                                            var tooltipWidth = size.contentSize[0];
                                            var tooltipHeight = size.contentSize[1];
                                            
                                            // 获取图表容器的尺寸
                                            var chartWidth = size.viewSize[0];
                                            var chartHeight = size.viewSize[1];
                                            
                                            // 计算tooltip位置
                                            var x = point[0];
                                            var y = point[1];
                                            
                                            // 如果tooltip会超出左边界，则向右偏移
                                            if (x - tooltipWidth / 2 < 0) {
                                                x = tooltipWidth / 2 + 10;
                                            }
                                            // 如果tooltip会超出右边界，则向左偏移
                                            else if (x + tooltipWidth / 2 > chartWidth) {
                                                x = chartWidth - tooltipWidth / 2 - 10;
                                            }
                                            
                                            // 如果tooltip会超出上边界，则向下偏移
                                            if (y - tooltipHeight < 0) {
                                                y = tooltipHeight + 10;
                                            }
                                            // 如果tooltip会超出下边界，则向上偏移
                                            else if (y + tooltipHeight > chartHeight) {
                                                y = chartHeight - tooltipHeight - 10;
                                            }
                                            
                                            return [x, y];
                                        }
                                    },
                                    legend: {
                                        bottom: 5,
                                        left: 'center',
                                        width: '95%',
                                        height: 'auto',
                                        maxHeight: 80,
                                        orient: 'horizontal',
                                        data: legendData.map(function(item) { 
                                            return item.name.length > 8 ? item.name.substring(0, 8) + '...' : item.name;
                                        }),
                                        textStyle: { 
                                            color: 'rgba(255,255,255,.8)', 
                                            fontSize: 9,
                                            width: 50,
                                            overflow: 'truncate'
                                        },
                                        itemWidth: 6,
                                        itemHeight: 6,
                                        itemGap: 6
                                    },
                                    series: [{
                                        name: '最受欢迎培训课程',
                                        type: 'pie',
                                        radius: ['40%', '60%'],
                                        center: ['50%', '45%'],
                                        data: pieData,
                                        color: ['#065aab', '#27d08a', '#2f89cf', '#e7cf4d', '#ff7b7b'],
                                        label: {
                                            show: false
                                        },
                                        labelLine: { show: false }
                                    }]
                                };
                                myChart.setOption(option);
                            });
                        </script>
                        <div class="boxfoot"></div>
                    </div>
            </li>
            <li>
                <div class="bar">
                    <div class="barbox">
                        <ul class="clearfix">
                            <li class="pulll_left counter">
                                <div class="counter-value">{{form.counters.employment.value}}</div>
                                <div class="counter-name">{{form.counters.employment.name}}</div>
                            </li>
                            <li class="pulll_left counter">
                                <div class="counter-value">{{form.counters.enterprise.value}}</div>
                                <div class="counter-name">{{form.counters.enterprise.name}}</div>
                            </li>
                            <li class="pulll_left counter">
                                <div class="counter-value">{{form.counters.training.value}}</div>
                                <div class="counter-name">{{form.counters.training.name}}</div>
                            </li>
                            <li class="pulll_left counter">
                                <div class="counter-value">{{form.counters.activity.value}}</div>
                                <div class="counter-name">{{form.counters.activity.name}}</div>
                            </li>
                            <li class="pulll_left counter">
                                <div class="counter-value">{{form.counters.incubation.value}}</div>
                                <div class="counter-name">{{form.counters.incubation.name}}</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="map">
                    <div style="font-size: 0.2rem;color: #fff; text-align: center; font-weight: 900;">德州市各县市区服务企业地图
                    </div>
                    <div class="map1"><img src="../static/picture/lbx.png"></div>
                    <div class="map2"><img src="../static/picture/jt.png"></div>
                    <div class="map3"><img src="../static/picture/map.png"></div>
                    <div class="map4" id="map_1"></div>
                    <div style="margin-top: 0.05rem; padding: 0.05rem; background: rgba(255,255,255,0.05); border-radius: 0.03rem; max-height: 1rem; overflow-y: auto;">
                        <div style="color: #fff; font-size: 0.1rem; text-align: center; margin-bottom: 0.03rem;">各县市区企业数量</div>
                        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.02rem;">
                            {% for item in form.map_1.data %}
                            <div style="color: #fff; font-size: 0.08rem; padding: 0.02rem; background: rgba(255,255,255,0.1); border-radius: 0.02rem; text-align: center;">
                                {{item.name}}<br/>{{item.value}}家
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="boxall" style="height:3.4rem">
                    <div class="alltitle">{{form.counters.training.name}}</div>
                    <div class="allnav" id="echart4"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.2rem">
                    <div class="alltitle">{{form.counters.activity.name}}</div>
                    <div class="allnav" id="echart5"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.2rem">
                    <div class="alltitle">{{form.counters.incubation.name}}</div>
                    <div class="allnav" style="height:2.5rem;overflow:hidden;position:relative;">
                        <table id="incubation-table"
                            style="width:100%;color:#fff;text-align:center;font-size:0.12rem;border-collapse:collapse;">
                            <thead>
                                <tr
                                    style="background:rgba(255,255,255,0.08);color:#fff;display:table;width:100%;table-layout:fixed;">
                                    <th
                                        style="border:1px solid #fff;padding:0.05rem;color:#fff;background:rgba(255,255,255,0.08);width:20%;">
                                        月份</th>
                                    <th
                                        style="border:1px solid #fff;padding:0.05rem;color:#fff;background:rgba(255,255,255,0.08);width:50%;">
                                        项目名称</th>
                                    <th
                                        style="border:1px solid #fff;padding:0.05rem;color:#fff;background:rgba(255,255,255,0.08);width:30%;">
                                        行业</th>
                                </tr>
                            </thead>
                            <tbody id="incubation-tbody" style="display:block;max-height:1.8rem;overflow-y:auto;">
                                {% for item in form.incubation_detail.monthly %}
                                <tr
                                    style="color:#fff;display:table;width:100%;table-layout:fixed;background:rgba(255,255,255,0.08);">
                                    <td
                                        style="border:1px solid #fff;padding:0.05rem;color:#fff;background:rgba(255,255,255,0.08);width:20%;">
                                        {{item.month}}</td>
                                    <td
                                        style="border:1px solid #fff;padding:0.05rem;color:#fff;background:rgba(255,255,255,0.08);width:50%;">
                                        {{item.name}}</td>
                                    <td
                                        style="border:1px solid #fff;padding:0.05rem;color:#fff;background:rgba(255,255,255,0.08);width:30%;">
                                        {{item.industry}}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <script>
                        // 简单自动滚动表格
                        $(function () {
                            var $tbody = $('#incubation-tbody');
                            var $rows = $tbody.find('tr');
                            var rowHeight = $rows.first().outerHeight();
                            var visibleRows = Math.floor($tbody.height() / rowHeight);
                            var totalRows = $rows.length;
                            if (totalRows > visibleRows) {
                                var scrollIndex = 0;
                                setInterval(function () {
                                    scrollIndex = (scrollIndex + 1) % (totalRows - visibleRows + 1);
                                    $tbody.scrollTop(rowHeight * scrollIndex);
                                }, 2000);
                            }
                        });
                    </script>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>
    </div>
    <div class="back"></div>

    <!--echart1-->
    <script>
        $(function echarts_1() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echart1'));
            // 组装德州就业人数月度数据
            var echart1Data = {{ form.employment_detail.monthly|tojson|safe }};
            // 获取当前月份
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            // 生成最近12个月的字符串数组
            var recentMonths = [];
            for (var i = 0; i < 12; i++) {
                var m = month - i;
                var y = year;
                if (m <= 0) {
                    m += 12;
                    y -= 1;
                }
                var mStr = m < 10 ? '0' + m : '' + m;
                recentMonths.push(y + '-' + mStr);
            }
            recentMonths = recentMonths.reverse(); // 时间升序
            // 按照 recentMonths 过滤和排序数据
            var monthMap = {};
            echart1Data.forEach(function (item) {
                monthMap[item.month] = item.youths.length;
            });
            var months = recentMonths;
            var values = months.map(function (m) { return monthMap[m] || 0; });
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                grid: {
                    left: '0%',
                    top: '10px',
                    right: '0%',
                    bottom: '4%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: months,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    axisTick: { show: false },
                    axisLabel: {
                        interval: 0,
                        rotate: 40,
                        show: true,
                        splitNumber: 15,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                    axisTick: { show: false },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1\t)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                        }
                    }
                }],
                series: [
                    {
                        type: 'bar',
                        data: values,
                        barWidth: '35%',
                        itemStyle: {
                            normal: {
                                color: '#2f89cf',
                                opacity: 1,
                                barBorderRadius: 5,
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        })






    </script>
    <!--echart2-->
    <script>
        $(function echarts_2() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echart2'));
            // 统计每个地区的企业数量
            var districtsData = {{ form.enterprise_detail.districts| tojson
        }};
        var districtCount = {};
        districtsData.forEach(function (item) {
            if (!districtCount[item.district]) {
                districtCount[item.district] = 0;
            }
            districtCount[item.district]++;
        });
        var xAxisData = Object.keys(districtCount);
        var seriesData = Object.values(districtCount);
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' }
            },
            grid: {
                left: '0%',
                top: '10px',
                right: '0%',
                bottom: '4%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: xAxisData,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [
                {
                    type: 'bar',
                    data: seriesData,
                    barWidth: '35%', //柱子宽度
                    itemStyle: {
                        normal: {
                            color: '#27d08a',
                            opacity: 1,
                            barBorderRadius: 5,
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
})







    </script>
    <!--echarts3_1-->
    <script>
        $(function echarts_31() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('fb1'));
            var chartTitle = '{{form.echarts3_1.title}}';
            var seriesData = JSON.parse('{{form.echarts3_1.data|tojson|safe}}');
            var legendData = seriesData.map(function (item) { return item.name; });
            option = {
                title: {
                    text: chartTitle,
                    left: 'center',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                    position: function (p) { return [p[0] + 10, p[1] - 10]; }
                },
                legend: {
                    bottom: 0,
                    option = {
                        title: {
                            text: chartTitle,
                            left: 'center',
                            textStyle: {
                                color: '#fff',
                                fontSize: 16
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)",
                            position: function (p) { return [p[0] + 10, p[1] - 10]; }
                        },
                        legend: {
                            bottom: 0,
                            itemWidth: 10,
                            itemHeight: 10,
                            data: legendData,
                            textStyle: {
                                color: 'rgba(255,255,255,.5)',
                                fontSize: 12
                            }
                        },
                        series: [
                            {
                                name: chartTitle,
                                type: 'pie',
                                center: ['50%', '42%'],
                                radius: ['40%', '60%'],
                                color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
                                label: { show: false },
                                labelLine: { show: false },
                                data: seriesData
                            }
                        ]
                    };
                    left: 'center',
                    textStyle: {
                        color: '#fff',
                        fontSize: '16'
                    }

                }],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                    position: function (p) {   //其中p为当前鼠标的位置
                        return [p[0] + 10, p[1] - 10];
                    }
                },
                legend: {
                    top: '70%',
                    itemWidth: 10,
                    itemHeight: 10,
                    data: {{ form.echarts3_2.xAxis | safe }}
        },
            textStyle: {
            color: 'rgba(255,255,255,.5)',
            fontSize: '12',
        }
    },
            series: [
            {
                name: '{{form.echarts3_2.title}}',
                type: 'pie',
                center: ['50%', '42%'],
                radius: ['40%', '60%'],
                color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
                label: { show: false },
                labelLine: { show: false },
                data: {{ form.echarts3_2.data | safe }}
        }
        ]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
})


    </script>
    <!--echarts3_3-->
    <script>
        $(function echarts_33() {
        // 彻底移除旧兴趣分布饼图，fb3 只渲染培训课程分布





    </script>
    <!--echarts4-->
    <script>
    $(function echarts_4() {
        var myChart = echarts.init(document.getElementById('echart4'));
    var trainingData = {{ form.training_detail.monthly|tojson|safe }};
        // 获取当前月份
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var recentMonths = [];
        for (var i = 0; i < 12; i++) {
            var m = month - i;
            var y = year;
            if (m <= 0) {
                m += 12;
                y -= 1;
            }
            var mStr = m < 10 ? '0' + m : '' + m;
            recentMonths.push(y + '-' + mStr);
        }
        recentMonths = recentMonths.reverse();
        // 汇总每月人数
        var monthCount = {};
        trainingData.forEach(function (item) {
            monthCount[item.month] = (monthCount[item.month] || 0) + 1;
        });
        var months = recentMonths;
        var values = months.map(function (m) { return monthCount[m] || 0; });
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' }
            },
            grid: {
                left: '0%',
                top: '10px',
                right: '0%',
                bottom: '4%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: months,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },
                axisTick: { show: false },
                axisLabel: {
                    interval: 0,
                    rotate: 40,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: { show: false },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [
                {
                    type: 'bar',
                    data: values,
                    barWidth: '35%',
                    itemStyle: {
                        normal: {
                            color: '#2f89cf',
                            opacity: 1,
                            barBorderRadius: 5,
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    })

    </script>
    <!--echarts5-->
    <script>
        $(function echarts_5() {
            var myChart = echarts.init(document.getElementById('echart5'));
            var activityData = {{ form.activity_detail.monthly|tojson|safe }};
            // 获取当前月份
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var recentMonths = [];
            for (var i = 0; i < 6; i++) {
                var m = month - i;
                var y = year;
                if (m <= 0) {
                    m += 12;
                    y -= 1;
                }
                var mStr = m < 10 ? '0' + m : '' + m;
                recentMonths.push(y + '-' + mStr);
            }
            recentMonths = recentMonths.reverse();
            // 汇总每月活动场数
            var monthCount = {};
            activityData.forEach(function (item) {
                monthCount[item.month] = (monthCount[item.month] || 0) + item.count;
            });
            var months = recentMonths;
            var values = months.map(function (m) { return monthCount[m] || 0; });
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '0%',
                    top: '10px',
                    right: '0%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: months,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        interval: 0,
                        show: true,
                        splitNumber: 15,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                        }
                    }
                }],
                series: [{
                    type: 'bar',
                    data: values,
                    barWidth: '35%', //柱子宽度
                    itemStyle: {
                        normal: {
                            color: '#2f89cf',
                            opacity: 1,
                            barBorderRadius: 5,
                        }
                    }
                }
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        })


    </script>
    <!--echarts6-->
    <script>
        $(function echarts_6() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echart6'));
            var dataStyle = {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    //shadowBlur: 40,
                    //shadowColor: 'rgba(40, 40, 40, 1)',
                }
            };
            var placeHolderStyle = {
                normal: {
                    color: 'rgba(255,255,255,.05)',
                    label: { show: false, },
                    labelLine: { show: false }
                },
                emphasis: {
                    color: 'rgba(0,0,0,0)'
                }
            };
            option = {
                color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
                tooltip: {
                    show: true,
                    formatter: "{a} : {c} "
                },
                legend: {
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 12,
                    bottom: '3%',
                    data: {{ form.echart6.xAxis | safe }}
        },
            textStyle: {
            color: 'rgba(255,255,255,.6)',
        }
	},
            series: [
            {% for item in form.echart6.data %}
        {
            name: '{{item.name|safe}}',
                type: 'pie',
                    clockWise: false,
                        center: ['50%', '42%'],
                            radius: {{ item.radius | safe }},
            itemStyle: dataStyle,
                hoverAnimation: false,
                    data: [{
                        value: {{ item.value }},
        name: '{{item.color}}'
		}, {
            value: {{ item.value2 }},
            name: 'invisible',
                tooltip: { show: false },
            itemStyle: placeHolderStyle
        }]
	    },
        {% endfor %}
	]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
})




    </script>

    <!--map_1-->
    <script>
        $(function map() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('map_1'));
            var data = {{ form.map_1.data| safe
        }};
        // 德州市各县市区经纬度
        var geoCoordMap = {
            '德城区': [116.3077, 37.4538],
            '陵城区': [116.5749, 37.3361],
            '禹城市': [116.6383, 36.9345],
            '乐陵市': [117.2256, 37.7292],
            '临邑县': [116.8672, 37.1927],
            '齐河县': [116.7609, 36.7955],
            '平原县': [116.4336, 37.1645],
            '夏津县': [116.0031, 36.9486],
            '武城县': [116.0706, 37.2134],
            '宁津县': [116.7937, 37.6532],
            '庆云县': [117.3905, 37.7771],
            '临盘街道': [116.495, 37.508], // 如有乡镇街道可补充
            '经济开发区': [116.365, 37.441] // 如有开发区可补充
        };
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };

        option = {
            tooltip: {
                trigger: 'item',
                show: true,
                formatter: function (params) {
                    if (typeof (params.value)[2] == "undefined") {
                        return params.name + '：无数据';
                    } else {
                        return params.name + '：' + params.value[2] + '家企业';
                    }
                }
            },

            geo: {
                map: 'dezhou',
                label: {
                    show: true,
                    color: '#fff',
                    fontSize: 12,
                    formatter: function(params) {
                        // 查找对应区域的数据
                        var dataItem = data.find(function(item) {
                            return item.name === params.name;
                        });
                        if (dataItem) {
                            return params.name + '\n' + dataItem.value + '家企业';
                        }
                        return params.name;
                    },
                    emphasis: {
                        show: false
                    }
                },
                roam: false,//禁止其放大缩小
                itemStyle: {
                    normal: {
                        areaColor: '#4c60ff',
                        borderColor: '#002097'
                    },
                    emphasis: {
                        areaColor: '#293fff'
                    }
                }
            },
            series: [
                {
                    name: '服务企业数量',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    symbolSize: function (val) {
                        // 让气泡大小更适中
                        return Math.max(10, val[2] / 100);
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#ffeb7b'
                        }
                    },
                    zlevel: 2
                }
            ]
        };

        myChart.setOption(option);
        
        // 添加数据标签显示
        setTimeout(function() {
            var total = data.reduce(function(sum, item) { return sum + item.value; }, 0);
            var maxItem = data.reduce(function(max, item) { return item.value > max.value ? item : max; }, data[0]);
            var minItem = data.reduce(function(min, item) { return item.value < min.value ? item : min; }, data[0]);
            
            // 在图表上添加数据统计信息
            myChart.setOption({
                graphic: [{
                    type: 'text',
                    left: 20,
                    top: 20,
                    style: {
                        text: '企业总数: ' + total + '家',
                        fontSize: 14,
                        fill: '#fff',
                        backgroundColor: 'rgba(0,0,0,0.6)',
                        padding: [5, 10, 5, 10],
                        borderRadius: 5
                    }
                }]
            });
        }, 500);
        
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
)




    </script>
</body>

</html>